<script setup lang='ts'>
import axios from 'axios';
import { reactive, ref } from 'vue';

// const account = ref("ceshi06")
// const password = ref("123456")
const loginForm = reactive<{
    account:string,
    password:string
}>({
    account:'ceshi06',
    password:'123456'
})
const login = async ()=>{
    if(loginForm.account && loginForm.password){
    // if(account.value && password.value){
        const res = await axios.post('https://meikou-api.itheima.net/login',
            // {account:account.value,
            // password:password.value}
            loginForm
        )
        alert(JSON.stringify(res))
    }else {
        alert('用户名或密码不能为空')
    }
}
</script>

<template>
    <div class="container">
        <div class="login_form">
            <input placeholder="请输入用户名" type="text" v-model="loginForm.account">
            <input placeholder="请输入密码" type="password" v-model="loginForm.password">
            <button @click="login">登录</button>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login_form {
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}
.login_form input, button {
    margin: 10px 0;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>